<template>
    <div class="wrapper">
      <van-nav-bar
            title="地图"
            left-text="返回"
            left-arrow
            fixed
            @click-left="onClickLeft"
            />
            
        <baidu-map :center="center" ref="baiduMap"  :zoom="zoom"  style="height:100%;width:100%" @click="getClickInfo" :scroll-wheel-zoom='true'>
          <bm-local-search :keyword="address" :auto-viewport="true" :location="location" v-if="location"></bm-local-search>
    </baidu-map>
    </div>
</template>
<script>
import axios from 'axios'
import { Card,NavBar} from 'vant';
export default {
    
  name: 'TestBaiDu',
  data () {
    return {
      location:'',
      address:'',
      center: {lng: 109.45744048529967, lat: 36.49771311230842},
      zoom: 13
    }
  },
  methods: {
    onClickLeft(){
      this.$router.go(-1)
    },
      getLat(){
          let that=this
          this.$jsonp(
                "http://api.map.baidu.com/geocoder/v2/?address="+that.address+"&output=json&ak=ozT7g2K7TQBlwdTOCKukAqTWOrXG9TCd")
                .then(data=>{
                    that.center.lng=data.result.location.lng;
                    that.center.lat=data.result.location.lat;
                    that.handler(that.$refs.baiduMap)
                })
                
      },
    handler ({BMap, map}) {
      var point = new BMap.Point(this.center.lng, this.center.lat);

      map.centerAndZoom(point, 13)
      var marker = new BMap.Marker(point) // 创建标注
      map.addOverlay(marker) // 将标注添加到地图中
      var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
      map.addOverlay(circle)
    },
    getClickInfo (e) {
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    }
},
mounted() {
    this.address=this.$route.query.address;
    this.location=this.$route.query.location
    this.getLat()
},
}
</script>
<style lang="scss" scoped>
    .wrapper{
        width:100vw;
        height: 100vh;
    }
</style>